<template>
    <div class="sort" @scroll="scrollEvent($event)">
        <div class="fixed">
            <div class="Nav">
                <!-- 四个频道 -->
                <div class="channel-item" :class="index == activeIndex ? 'channel-item-active' : ''" v-for="(item, index) in AllChannel" @click="clickChannel(index)">{{ item.name }}</div>
                <!-- 搜索图标 -->
                <van-icon name="search" @click="goSearch" />
            </div>
            <!-- 频道下分类 -->
            <div class="classify-box clearfix" v-if="tab == 0">
                <div class="classify-item" :class="index == sortActiveIndex ? 'sortActive' : ''" v-for="(item, index) in maleData" @click="classificationResult(item.url.substr(-7), index)">
                    {{ item.name }}
                </div>
            </div>
            <div class="classify-box clearfix" v-if="tab == 1">
                <div class="classify-item" :class="index == sortActiveIndex ? 'sortActive' : ''" v-for="(item, index) in girlsData" @click="classificationResult(item.url.substr(-7), index)">
                    {{ item.name }}
                </div>
            </div>
            <div class="classify-box clearfix" v-if="tab == 2">
                <div class="classify-item" :class="index == sortActiveIndex ? 'sortActive' : ''" v-for="(item, index) in publishData" @click="classificationResult(item.url.substr(-7), index)">
                    {{ item.name }}
                </div>
            </div>
            <div class="classify-box clearfix" v-if="tab == 3">
                <div class="classify-item" :class="index == sortActiveIndex ? 'sortActive' : ''" v-for="(item, index) in voiceData" @click="classificationResult(item.url.substr(-7), index)">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <!-- 分类书籍展示 -->
        <div class="bookshow">
            <div class="book-item" v-for="item in ChannelData" @click="goBookDetails(item.id, item.title)">
                <img class="img-auto" :src="item.cover" v-if="Imgflag == 'cover'" :onerror="defaultImg" />
                <img class="img-auto" :src="item.iconUrl" v-else-if="Imgflag == 'iconUrl'" />

                <div class="name">{{ item.title }}</div>
                <div class="author">{{ item.author }}</div>
            </div>
        </div>
    </div>
</template>

<script>
import LazyLoading from "../components/LazyLoading.vue";
export default {
    name: "Sort",
    data() {
        return {
            // 四个频道数据
            AllChannel: null,
            maleData: null,
            girlsData: null,
            publishData: null,
            voiceData: null,
            tab: 0,
            // 分类数据
            ChannelData: null,
            // 分类图片名称标识符
            Imgflag: null,
            // 频道高亮下标
            activeIndex: 0,
            // 分类高亮下标
            sortActiveIndex: 0,
            defaultImg: 'this.src="' + require("../assets/images/defaultImg.png") + '"',
            // 频道下的第一个子分类id
            childId: null,
            timer: null,
        };
    },
    components: {
        LazyLoading,
    },
    created() {
        this.getAllChannel();
        this.clickChannel(0);
        this.classificationResult("catId=7", 0);
    },
    // 监听
    mounted() {
        document.addEventListener("scroll", this.debounce(this.handleScroll, 500));
    },

    //   销毁
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
    },

    methods: {
        scrollEvent(e) {
            if (e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight) {
                //防抖节流
                clearInterval(this.timer);
                this.timer = setTimeout(() => {
                    // this.getNextPageData(this.childId);
                }, 500);
            }
        },
        // 触底获取下一页数据
        getNextPageData(catid) {
            if (catid.charAt(0) == "c") {
                this.axios({
                    method: "get",
                    url: "source/v2/searchBook.json" + catid + "&page=2",
                })
                    .then((res) => {
                        // this.ChannelData.push(...res.data.list);
                    })
                    .catch((err) => {});
            }
        },

        goSearch() {
            this.$router.push({ name: "Search" });
        },
        // 跳转书籍详情
        // goBookDetails(BookId, title) {
        //     this.$router.push({
        //         name: "BookDetails",
        //         query: {
        //             BookId,
        //             title,
        //         },
        //     });
        // },
        goBookDetails(BookId, title) {
            //
            //
            this.show = false;
            //
            if (BookId.split("_")[0] == "audio") {
                this.$router.push({
                    name: "ListenBook",
                    query: {
                        BookId,
                        title,
                    },
                });
            } else {
                this.$router.push({
                    name: "BookDetails",
                    query: {
                        BookId,
                        title,
                    },
                });
            }
        },
        // 请求所有频道以及分类
        getAllChannel(index) {
            this.axios({
                method: "get",
                url: "https://apis.netstart.cn/yunyuedu/mergedCategroy.json",
            })
                .then((res) => {
                    // 保存四个频道
                    this.AllChannel = res.data;
                    // 男生频道数据
                    this.maleData = this.AllChannel[0].cates;
                    // 女生频道数据
                    this.girlsData = this.AllChannel[1].cates;
                    // 出版频道数据
                    this.publishData = this.AllChannel[2].cates;
                    // 听书频道数据
                    this.voiceData = this.AllChannel[3].cates;
                    // 获取频道下的第一个子分类id
                    this.childId = res.data[index].cates[0].url.split("?")[1];
                })
                .catch((err) => {});
        },
        clickChannel(index) {
            if (index == this.tab || index == this.activeIndex) {
                return;
            }
            this.tab = index;
            this.activeIndex = index;
            this.getAllChannel(index);
            setTimeout(() => {
                this.classificationResult(this.childId, 0);
            }, 100);
        },
        // 分类筛选结果列表
        classificationResult(catid, index) {
            // if (index == this.sortActiveIndex) {
            //     return;
            // }

            this.sortActiveIndex = index;
            // catid atId id d
            if (catid.charAt(0) == "c") {
                this.axios({
                    method: "get",
                    url: "source/v2/searchBook.json?" + catid + "&page=1",
                })
                    .then((res) => {
                        this.ChannelData = res.data.list;
                        this.Imgflag = "cover";
                    })
                    .catch((err) => {});
            } else if (catid.charAt(0) == "I") {
                this.axios({
                    methods: "get",
                    url: "source/v2/searchBook.json?catId=" + catid.substr(-4) + "&page=1&pay=0",
                })
                    .then((res) => {
                        this.ChannelData = res.data.list;
                        this.Imgflag = "cover";
                    })
                    .catch((err) => {});
            } else if (catid.charAt(0) == "a") {
                this.axios({
                    method: "get",
                    // https://apis.netstart.cn/yunyuedu/source/v2/searchBook.json?catId=11
                    url: "source/v2/searchBook.json?catId=" + catid.substr(-2) + "&page=1",
                })
                    .then((res) => {
                        this.ChannelData = res.data.list;
                        this.Imgflag = "cover";
                    })
                    .catch((err) => {});
            } else if (catid.charAt(0) == "d") {
                this.axios({
                    method: "get",
                    // https://apis.netstart.cn/yunyuedu/source/v2/searchBook.json?catId=11
                    url: "source/v2/searchBook.json?catId=" + catid.substr(-5) + "&page=1",
                })
                    .then((res) => {
                        this.ChannelData = res.data.list;
                        this.Imgflag = "cover";
                    })
                    .catch((err) => {});
            }
        },

        handleScroll() {
            let scrollTop = document.documentElement.scrollTop; //滚动条在Y轴滚动过的高度
            let scrollHeight = document.documentElement.scrollHeight; //滚动条的高度
            let clientHeight = document.documentElement.clientHeight; //浏览器的可视高度
            if (scrollTop + clientHeight == scrollHeight) {
            }
        },
        debounce(fn, delay) {
            let timer = null; // 借助闭包
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(fn, delay); // 简化写法
            };
        },
    },
};
</script>

<style lang="less" scoped>
.sort {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: calc(100% - 50px);
    background-color: #f7f8f8;
    overflow-y: auto;
    &::-webkit-scrollbar {
        display: none;
    }
    .fixed {
        position: fixed;
        top: 0;
    }
    .bookshow {
        padding: 0 20px;
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 20px;
        margin-top: 100px;
        .book-item {
            width: 29.333%;
            margin: 20px 20px 0 0;
            img {
                width: 98px;
                height: 131px;
            }
            .name {
                margin: 10px 0;
                font-size: 14px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
            .author {
                color: #898e8e;
            }
            &:nth-child(3n) {
                margin-right: 0;
            }
        }
    }
    .classify-box {
        background-color: #e9efef;
        padding: 0 20px;
        .classify-item {
            float: left;
            font-size: 14px;
            margin: 5px 19px 10px 0;
            height: 20px;
        }
        .sortActive {
            color: green;
            height: 20px;
        }
    }
    .Nav {
        height: 50px;
        background-color: #fff;
        display: flex;
        align-items: center;
        .channel-item {
            font-size: 14px;
            color: #989e9e;
            margin: 0 0 0 20px;
        }
        .channel-item-active {
            font-size: 16px;
            color: green;
            font-weight: 700;
            flex: none;
            min-width: 33px;
        }
        .van-icon-search {
            font-size: 20px;
            margin: 0 0 0 125px;
        }
    }
}
</style>
